<template>
  <view class="container">
    <!-- 顶部门店信息 -->
   <!-- <view class="store-header">
      <view class="store-info">
      </view>
    </view> -->
	

    <!-- 收益统计卡片 -->
    <view class="earn-box">
      <!-- 时间筛选 -->
      <view class="earn-nav">
        <view class="earn-navLeft">
          <view 
            v-for="(tab, index) in ['今天','昨天','近七天','本月','全部']" 
            :key="index"
            class="tab-item"
            :class="{'active': currentTab === index}"
            @tap="switchTab(index)"
          >
            {{tab}}
          </view>
        </view>
      </view>

      <!-- 主要收益数据 -->
      <view class="earn-firstBox">
        <view class="earn-clock">
          <view class="earn-clockUp">
            ¥{{statsData.salesAmount || '0.00'}}
          </view>
          <view class="earn-clockDown">
            销售额
          </view>
        </view>
        <view class="earn-clock">
          <view class="earn-clockUp">
            {{statsData.orderCount || '0'}}
          </view>
          <view class="earn-clockDown">
            订单数
          </view>
        </view>
        <view class="earn-clock">
          <view class="earn-clockUp">
            {{statsData.customerCount || '0'}}
          </view>
          <view class="earn-clockDown">
            顾客数
          </view>
        
        </view>
      </view>     

    <!-- 订单列表 -->
    <view class="order-list">
      <view class="order-item" v-for="(item, index) in orderList" :key="index">
        <view class="order-header">
          <view class="store-name">{{ item.mchName }}</view>
          <view class="order-status">{{ item.statusDesc }}</view>
        </view>
        
        <view class="order-content">
          <view class="info-row">
            <text class="label">订单号：</text>
            <text class="value">{{ item.orderNo }}</text>
          </view>
          <view class="info-row">
            <text class="label">房间：</text>
            <text class="value">{{ item.roomName }}</text>
          </view>
          <view class="info-row">
            <text class="label">预订时间：</text>
            <text class="value">{{ item.beginTime }} 至 {{ item.endTime }}</text>
          </view>
          <view class="info-row">
            <text class="label">时长：</text>
            <text class="value">{{ item.bookHour }}小时</text>
          </view>
          <view class="info-row">
            <text class="label">支付金额：</text>
            <text class="value price">¥{{ (item.totalFee / 100).toFixed(2) }}</text>
          </view>
          <view class="info-row" v-if="item.couponCode">
            <text class="label">优惠券：</text>
            <text class="value">{{ item.couponCode }} (¥{{ (item.couponAmount / 100).toFixed(2) }})</text>
          </view>
        </view>
      </view>
    </view>
 </view>
 </view>
</template>
<script>
export default {
  data() {
    return {
      currentTab: 0,
      // 统计数据
      statsData: {
        salesAmount: '0.00',    // 销售额
        orderCount: '0',        // 订单数
        customerCount: '0'      // 顾客数
      },
      orderList: [],
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        dateType: 'today' // today, yesterday, week, month, all
      }
    }
  },

  onLoad() {
    this.getFinanceData()
    this.getOrderList()
  },

  methods: {
    // 切换时间tab
    switchTab(index) {
      this.currentTab = index
      const dateTypes = ['today', 'yesterday', 'week', 'month','all']
      this.queryParams.dateType = dateTypes[index]
      this.getFinanceData()
      this.getOrderList()
    },

    // 获取财务数据
    getFinanceData() {
		//发送POST请求用于获取财务相关数据，如销售额、订单数和顾客数_已完成
      uni.$u.http.post('/system/report/rangeTrendData').then(res => {
        if(res.resultCode === 0) {
          const { salesFeeData, orderCntData, custCntData } = res.data
          const lastIndex = salesFeeData.length - 1

          // 根据不同时间类型计算数据
          switch(this.queryParams.dateType) {
            case 'today':
              this.statsData = {
                salesAmount: salesFeeData[lastIndex].toFixed(2),
                orderCount: orderCntData[lastIndex],
                customerCount: custCntData[lastIndex]
              }
              break
            case 'yesterday':
              this.statsData = {
                salesAmount: salesFeeData[lastIndex - 1].toFixed(2),
                orderCount: orderCntData[lastIndex - 1],
                customerCount: custCntData[lastIndex - 1]
              }
              break
            case 'week':
              this.statsData = {
                salesAmount: salesFeeData.slice(-7).reduce((a,b) => a+b, 0).toFixed(2),
                orderCount: orderCntData.slice(-7).reduce((a,b) => a+b, 0),
                customerCount: custCntData.slice(-7).reduce((a,b) => a+b, 0)
              }
              break
            case 'month':
              this.statsData = {
                salesAmount: salesFeeData.reduce((a,b) => a+b, 0).toFixed(2),
                orderCount: orderCntData.reduce((a,b) => a+b, 0),
                customerCount: custCntData.reduce((a,b) => a+b, 0)
              }
              break
			  case 'all':
			    this.statsData = {
			      salesAmount: salesFeeData.reduce((a,b) => a+b, 0).toFixed(2),
			      orderCount: orderCntData.reduce((a,b) => a+b, 0),
			      customerCount: custCntData.reduce((a,b) => a+b, 0)
			    }
			    break
          }
        }
      }).catch(err => {
        console.error('获取财务数据失败:', err)
        uni.showToast({
          title: '获取数据失败',
          icon: 'none'
        })
      })
    },

    // 获取订单列表
    getOrderList() {
      const params = {
        ...this.queryParams,
        mchId: uni.getStorageSync('mchId')
      }
      //发送POST请求获取订单List和总数据量total
      uni.$u.http.post('/system/order/list', params)
        .then(res => {
          if(res.code === 0) {
            this.orderList = res.rows
            this.total = res.total
            
            // 更新加载状态
            if (this.orderList.length >= this.total) {
              this.loadStatus = 'nomore'
            } else {
              this.loadStatus = 'loadmore'
            }
          }
        })
        .catch(err => {
          uni.showToast({
            title: '获取订单列表失败',
            icon: 'none'
          })
        })
    },

    // 上拉加载更多
    onReachBottom() {
      this.queryParams.pageNum++
      this.getOrderList()
    },

    // 下拉刷新
    onPullDownRefresh() {
      this.queryParams.pageNum = 1
      this.getFinanceData()
      this.getOrderList()
      uni.stopPullDownRefresh()
    }
  }
}
</script>
<style lang="scss">
.container {
  min-height: 100vh;
  padding-top:120rpx;
  background-image: linear-gradient(to bottom, #3C8A40, #F8F9FA);	
}
.logo-image{
width: 50rpx;
height: 50rpx;
position: relative;
background-color: #FFFFFF;
}
.logo-pic{
background-size: cover;
background-repeat:no-repeat;
// background-attachment:fixed;
background-position:top;
border-radius: 50%; 
overflow: hidden;
}
.store-header {
  background: #4E9B52;
  padding: 30rpx 20rpx;
  
  .store-info {
    display: flex;
    align-items: center;
    
    .store-avatar {
      width: 60rpx;
      height: 60rpx;
      border-radius: 50%;
      margin-right: 20rpx;
    }
    
    .store-name {
      color: #fff;
      font-size: 30rpx;
    }
  }
}
.order-list {
  padding: 60rpx 20rpx;
  
  .order-item {
    background: #fff;
    border-radius: 12rpx;
    padding: 20rpx;
    margin-bottom: 20rpx;
    box-shadow: 0 2rpx 12rpx rgba(0,0,0,0.3);
    
    .order-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding-bottom: 20rpx;
      border-bottom: 1px solid #eee;
      
      .store-name {
        font-size: 32rpx;
        font-weight: bold;
      }
      
      .order-status {
        padding: 4rpx 16rpx;
        border-radius: 20rpx;
        font-size: 24rpx;
        color: #4E9B52;
      }
    }
    
    .order-content {
      padding-top: 20rpx;
      
      .info-row {
        display: flex;
        margin-bottom: 16rpx;
        
        .label {
          color: #666;
          width: 160rpx;
        }
        
        .value {
          flex: 1;
          
          &.price {
            color: #ff6b6b;
            font-weight: bold;
          }
        }
      }
    }
  }
}
.earn-box {
  background: #fff;
  border-radius: 12rpx;
  margin: 20rpx;
  padding: 20rpx;
  box-shadow: 0 2rpx 12rpx rgba(0,0,0,0.05);
}

.earn-nav {
  display: flex;
  justify-content: space-between;
  padding: 20rpx 0;
  border-bottom: 1rpx solid #eee;
  
  .earn-navLeft {
    display: flex;
    gap: 30rpx;
    
    .tab-item {
      font-size: 28rpx;
      color: #666;
      padding: 6rpx 0;
      
      &.active {
        color: #4E9B52;
        font-weight: 500;
        position: relative;
        
        &::after {
          content: '';
          position: absolute;
          left: 0;
          bottom: -10rpx;
          width: 100%;
          height: 4rpx;
          background: #4E9B52;
          border-radius: 2rpx;
        }
      }
    }
  }
}

.earn-firstBox {
  display: flex;
  justify-content: space-around;
  padding: 40rpx 0;
  border-bottom: 2rpx solid #ccc;
  
  .earn-clock {
    text-align: center;
    
    .earn-clockUp {
      font-size: 48rpx;
      color: #333;
      font-weight: bold;
      margin-bottom: 10rpx;
    }
    
    .earn-clockDown {
      font-size: 26rpx;
      color: #666;
    }
  }
}

.earn-thirdBox,
.earn-fourthBox {
  display: flex;
  justify-content: space-around;
  margin-top: 30rpx;
  
  .earn-smclock {
    text-align: center;
    
    .earn-smclockUp {
      font-size: 26rpx;
      color: #666;
      margin-bottom: 10rpx;
    }
    
    .earn-smclockMid {
      font-size: 36rpx;
      color: #333;
      font-weight: 500;
      margin-bottom: 6rpx;
    }
    
    .earn-smclockDown {
      font-size: 22rpx;
      color: #666;
    }
  }
}
</style>
